import React, { FC, useEffect, useState } from 'react'
import { Swiper, Image, Tabs } from 'antd-mobile'
import { useRequest } from 'ahooks'
import _ from 'lodash'


import MyHeader from '../../components/MyHeader'
import { gethomelistAPI, gettravelbannersAPI } from '../../api/api'
import { baseURL } from '../../api/request'
import ItemOne from '../../components/ItemOne'
import LoadMore from '../../components/LoadMore'
import { ShowMsg } from '../../utils/message'
import { useNavigate } from 'react-router-dom'

const Home: FC = () => {
  const [activeKey, setActiveKey] = useState<string>('1')
  const [bannerList, setBannerList] = useState([])
  let [homeList, setHomeList] = useState<any>([])
  const [total, setTotal] = useState<number>(0)
  const pageSize: number = 10
  let [page, setPage] = useState<number>(1)

  // 获取轮播图
  const getBannerList = useRequest(gettravelbannersAPI, {
    manual: true,
    onSuccess: (res: any) => {
      if (res.code == 200) {
        setBannerList(res.result)
      }
    }
  })

  // 获取列表数据
  const getHomeList = useRequest(gethomelistAPI, {
    manual: true,
    onSuccess: (res: any) => {
      if (res.code == 200) {
        const { page, total, pageSize, result } = res
        setTotal(total)
        setHomeList(result)
      }
    }
  })

  // 切换选项卡
  const changeType = (type: string) => {
    setPage(1)
    setActiveKey(type)
    getHomeList.run({
      type: type
    })
  }

  // 下拉刷新
  const refreshData = () => {
    setPage(1)
    getHomeList.run({
      type: activeKey,
      page: 1
    })
  }

  // 分页 加载下一页数据
  const loadmoreData = async (dataEnd: any, dataAdd: any) => {
    console.log(total);

    if (total != 0) {
      page = page + 1
      setPage(page)
      if (page > Math.ceil(total / pageSize)) {
        ShowMsg('已经滑到底了')
        dataEnd()
      } else {
        // console.log('开始请求下一页数据')
        let res: any = await gethomelistAPI({
          page,
          type: activeKey,
          pageSize
        })
        if (res.code == 200) {
          homeList = _.concat(homeList, res.result)
          setTotal(res.total)
          setHomeList([...homeList])
          dataAdd()
        }
      }
    }
  }


  useEffect(() => {
    getBannerList.run()
    getHomeList.run({
      type: activeKey
    })
  }, [])

  return (
    <div>
      <MyHeader title='主 页' noback={true}></MyHeader>

      <div>
        <Swiper loop={true} autoplay={true}>
          {
            bannerList.map((item: any, index: any) => {
              return (
                <Swiper.Item key={index}>
                  <Image style={{ height: '200px' }} src={item.imgs[0]?.url.replace(/public/, baseURL)} />
                </Swiper.Item>
              )
            })
          }
        </Swiper>
      </div>

      <div>
        <Tabs
          activeKey={activeKey}
          onChange={changeType}
          style={{
            '--active-line-color': 'var(--adm-color-danger)',
            '--active-title-color': 'var(--adm-color-danger)',
          }}
        >
          <Tabs.Tab title='最热推荐' key='1'>
            <div>
              <LoadMore refreshData={refreshData} loadmoreData={loadmoreData}>
                <ItemOne list={homeList} active='1'></ItemOne>
              </LoadMore>
            </div>
          </Tabs.Tab>
          <Tabs.Tab title='最新推荐' key='2'>
            <div>
              <LoadMore refreshData={refreshData} loadmoreData={loadmoreData}>
                <ItemOne list={homeList} active='2'></ItemOne>
              </LoadMore>
            </div>
          </Tabs.Tab>
        </Tabs>
      </div>
    </div>
  )
}

export default Home
